import { useEffect, useState } from 'react'
import '../assets/middle.css'
import Cpu from './Cpu'
import Disk from './Disk'
import Mem from './Mem'
import Battery from './Battery'

const { setMem } = window.api.mem

function Middle(props) {
  const [memInf, setMemInf] = useState({})
  const [memOther, setMemOther] = useState([])

  useEffect(() => {
    setMem(props, setMemInf, setMemOther)
  }, [props.data])

  return (
    <div className="middle-container">
      <div className="middle-content">
        {props.clickedItemIdx === 0 && (
          <Cpu cpu={props.data.cpu} loadInfo={props.data.cpuLoadInf} />
        )}
        {props.clickedItemIdx === 1 && <Disk dSizeDetail={props.data.disks.disks} />}
        {props.clickedItemIdx === 2 && <Mem memInf={memInf} memOther={memOther} />}
        {props.data.batteryInf &&
          props.data.batteryInf.hasBattery &&
          props.clickedItemIdx === 3 && (
            <div>
              <Battery batteryInf={props.data.batteryInf} />
            </div>
          )}
      </div>
    </div>
  )
}

export default Middle
